<template>
    <div id='container'></div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { Chart } from '@antv/g2'

let chart

onMounted(() => {
    chart = new Chart({
        container,
        autoFit: true,
    });

    chart
        .title('马赛克图')
        .interval()
        .data({
            type: 'fetch',
            value: '/os/bmw-prod/3041da62-1bf4-4849-aac3-01a387544bf4.csv',
            transform: [{type: 'log'}]
        })
        .encode('x', 'market')
        .encode('y', 'value')
        .encode('color', 'segment')
        .transform({type: 'flexX', reducer: 'sum'})
        .transform({type: 'stackY'})
        .transform({type: 'normalizeY'})
        .axis('y', false)
        .scale('x', {paddingOuter: 0, paddingInner: 0.01})
        .label({
            text:  (d) => d.segment,
            fill: '#fff',
            fontSize: 10,
            textAlign: 'start',
            x: 5, 
            y: 5,
            textBaseline: 'top'

        })
        .label({
            text:  (d) => d.value,
            fill: '#fff',
            fontSize: 10,
            textAlign: 'start',
            x: 5, 
            y: 5,
            dy: 15
        })
        .tooltip('value')
        
        
    chart.render();
});

// 销毁
onUnmounted(() => {
    chart.destroy();
    chart = null;
});
</script>

<style lang='less' scoped>
#container {
    width: 800px;
    height: 800px;
}
</style>